<template>
    <div>
        <el-card>
            <el-form>
                <el-form-item label="sku名称">
                    <el-input placeholder="SKU名称" v-model="skuParams.skuName" />
                </el-form-item>
                <el-form-item label="价格(元)">
                    <el-input placeholder="价格(元)" v-model="skuParams.price" />
                </el-form-item>
                <el-form-item label="重量(克)">
                    <el-input placeholder="重量(克)" v-model="skuParams.weight" />
                </el-form-item>
                <el-form-item label="sku描述">
                    <el-input type="textarea" placeholder="请输入SKU描述" v-model="skuParams.skuDesc"></el-input>
                </el-form-item>
                <el-form-item label="平台属性">
                    <el-form>
                        <el-row :gutter="20" style="margin-bottom: 10px;">
                            <el-col v-for="(item, i) in attrList" :key="item.id">
                                <el-form-item :label="item.attrName" label-width="100px"
                                    style="margin-bottom: 10px;overflow: hidden;">
                                    <!-- <el-select v-model="skuParams.skuAttrValueList[i]"> -->
                                    <el-select v-model="item.attrIdAndValueId">
                                        <el-option v-for="attrValue in item.attrValueList" :key="attrValue.id"
                                            :label="attrValue.valueName" :value="`${item.id}:${attrValue.id}`" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-form-item>
                <el-form-item label="销售属性">
                    <el-form>
                        <el-row :gutter="20">
                            <el-col v-for="(item, i) in saleAttrList" :key="item.id">
                                <el-form-item :label="item.saleAttrName" label-width="100px"
                                    style="margin-bottom: 10px;overflow: hidden;">
                                    <!-- <el-select v-model="skuParams.skuSaleAttrValueList[i]"> -->
                                    <el-select v-model="item.SaleAttrValueId">
                                        <el-option v-for="(attrValue, index) in item.spuSaleAttrValueList"
                                            :key="attrValue.id" :label="attrValue.saleAttrValueName"
                                            :value="`${item.id}:${attrValue.id}`" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-form-item>
                <el-form-item label="图片名称">
                    <el-table border style="margin: 10px 0;" ref="table" :data="imageList">

                        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                        <el-table-column label="图片" align="center">
                            <template #="{ row, $index }">
                                <img :src="row.imgUrl" alt="" class="itemimgarr" />
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" align="center" prop="imgName"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template #="{ row, $index }">
                                <el-button type="primary" size="default" @click="setDefaultImg(row)">
                                    设置默认
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button type="primary" size="default" @click="save">保存</el-button>
                    <el-button type="primary" size="default" @click="cancel">取消</el-button>

                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { getattrInfoList } from '@/api/product/attr/index.js'
import { getSpuImageListAPI, getSpuSaleAttrListAPI, addSkuAPI } from '@/api/product/spu/index.js'
import { ref, reactive } from 'vue'
let $emit = defineEmits(['changeScenesku'])
// 销售属性
let saleAttrList = ref([])
// 照片墙
let imageList = ref([])
// 平台属性
let attrList = ref([])
// 销售属性
let skuParams = reactive({
    // 父组件传过来的
    category3Id: '', // 三级分类ID
    spuId: '', // 已有SPU的ID
    tmId: '', // SPU的品牌ID
    id: '',
    // 双向绑定收集的
    skuName: '', // SKU的名称
    price: '', // SKU的价格
    weight: '', // SKU的重量
    skuDesc: '', // SKU的描述信息
    skuAttrValueList: [ // SKU的平台属性
        // {
        //   attrId: '', // 平台属性ID
        //   valueId: '', // 平台属性值ID
        // }
    ],
    skuSaleAttrValueList: [ // SKU的销售属性
        // {
        //   saleAttrId: '', // 销售属性ID
        //   saleValueId: '', // 销售属性值ID
        // }
    ],
    skuDefaultImg: '', // SKU的默认图片
})
const cancel = () => {
    $emit('changeScenesku', { flag: 0, state: '' })
}
const initSkuData = async (c1Id, c2Id, c3Id, row) => {
    // 收集数据
    console.log(row);
    // console.log(c1Id,c2Id,c3Id);
    //   skuParams.value.category3Id = row.category3Id
    //   skuParams.value.spuId = row.id 
    //   skuParams.value.tmId = row.tmId
    //  console.log(skuParams);
    // console.log(c1Id,c2Id,id);
    const res = await Promise.all([
        getattrInfoList(c1Id, c2Id, c3Id),
        getSpuSaleAttrListAPI((row.id)),
        getSpuImageListAPI((row.id)),
    ])
    attrList.value = res[0].data
    console.log(attrList.value);
    saleAttrList.value = res[1].data
    console.log(saleAttrList.value);
    imageList.value = res[2].data
    console.log(res);
}

// 表格组件实例
let table = ref(null)
// 设置默认图片
const setDefaultImg = (row) => {
    console.log(row);
    skuParams.skuDefaultImg = row.imgUrl
}
const save = async () => {
    // 整理参数
    // 平台属性
    // skuParams.skuAttrValueList = attrList.value.map((item) => ({
    //       attrId: item.id,
    //       valueId: item.attrValueList[0].id
    //   }))
    //   // 销售属性
    //   skuParams.skuSaleAttrValueList = saleAttrList.value.map((item) => ({
    //     saleAttrId: item.id,
    //     saleValueId: item.spuSaleAttrValueList[0].id
    //   }))
    skuParams.skuAttrValueList = attrList.value.reduce((prev, next) => {
        if (next.attrIdAndValueId) {
            let [attrId, valueId] = next.attrIdAndValueId.split(':')
            prev.push({
                attrId,
                valueId
            })
        }
        return prev
    }, [])
    // // 销售属性
    skuParams.skuSaleAttrValueList = saleAttrList.value.reduce((prev, next) => {
        if (next.SaleAttrValueId) {
            let [saleAttrId, saleValueId] = next.SaleAttrValueId.split(':')
            prev.push({
                saleAttrId, saleValueId
            })
        }
        return prev
    }, [])
    console.log(skuParams);
    // 增加SKU
    const res = await addSkuAPI(skuParams)
    console.log(res);
    if (res.code === 200) {
        ElMessage.success(res.message)
        $emit('changeScenesku', { flag: 0, state: '' })
    } else {
        ElMessage.error(res.message)
    }
}


defineExpose({
    initSkuData
});
</script>
<style scoped lang="scss">
.itemimgarr {
    width: 100px;
    height: 100px;
}
</style>